import styled from 'styled-components'
export const AllAlbumsWrapper = styled.div`
  
`
export const NavWrapper = styled.div`
  border-bottom:2px solid rgb(213,127,125);
  display: flex;
  .title{
    font-size:24px;
    color:#333;
    font-weight:400;
  }
  .cats{
    margin-top:15px;
    margin-left:10px;
    .cat{
      border-right:1px solid #ccc;
      padding:0 20px;
      cursor:pointer;
      &:last-child{
        border-right:none;
      }
    }
  }
`
export const ContentWrapper = styled.div`
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  .item{
    width:153px;
    position:relative;
    margin:13px;
    cursor:pointer;
    &:hover{
      .play{
        display: block;
      }
    }
    .play{
      position: absolute;
      width: 44px;
      height: 44px;
      top: 60%;
      left: 70%;
      margin: -22px 0 0 -22px;
      background-position: -30px -135px;
      display: none;
    }
    .image{
      width: 130px;
      height:130px;
    }
    .mask{
      position:absolute;
      width: 153px;
      height:130px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-position: 0 -845px;
      /* text-indent: -9999px; */
    }
    .name{
      margin-top:5px;
      width: 100%;
      font-size:14px;
      color:#333;
    .artist{
      margin-top:5px;
      width: 100%;
      font-size:12px;
      color:#666;
    }
  }
` 